<template>
  <div>
    <el-drawer :withHeader="false" :visible.sync="dialog" direction="rtl" :with-header="false" ref="drawer"
      size="910px">
      <div style="margin:20px">
        <el-tabs v-model="choseProject" @tab-click="handleClick" style="margin: 20px; margin-bottom: -10px">
          <el-tab-pane :label="item.projectName" v-for="item in projectList" :value="item.projectName" :key="item.projectName" :name="item.projectName">
            <span slot="label">
              <el-badge :value="item.num">
                {{item.projectName}}
              </el-badge>
            </span>
            <el-table
              :data="tableData"
              stripe
              size="mini"
              style="width: 100%"
              :height="tableHeight">
              <el-table-column
                type="index"
                width="40">
              </el-table-column>
              <el-table-column
                width="100"
                label="类型">
                <template slot-scope="scope">
                  <!-- 0:任务、1：生产、2：测试 -->
                  <el-tag :type="tagType(scope.row.type)" effect="plain">{{typeName(scope.row.type)}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="submitTime"
                label="提交时间"
                width="180">
              </el-table-column>
              <el-table-column
                prop="submitUserName"
                label="提交人"
                width="100">
              </el-table-column>
              <el-table-column prop="lv1ModuleName" label="模块" width="90px" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="lv2ModuleName" label="子模块" width="130px" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="describe"
                label="描述">
              </el-table-column>
            </el-table>
            <div style="float:right;margin-right: 0; margin-top: 10px">
              <el-button @click="cancelForm">取 消</el-button>
              <el-button
                type="primary"
                @click="submit"
                :loading="loading"
              >
                {{ loading ? '提交中...' : '确 定' }}
              </el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import {getSubmit, board} from '@/api/repository'
  export default {
    name: "SubmitPop",
    data() {
      return {
        tableHeight: 490,
        height: `${document.documentElement.clientHeight}`,
        dialog: false,
        loading: false,
        row: '',
        tableData: [],
        projectList: [],
        choseProject: ''
      }
    },
    methods: {
      showPop(row) {
        this.row = row
        this.dialog = true
        getSubmit(this.row.crId).then(response => {
          this.projectList = response
          this.choseProject = this.projectList[0].projectName
          this.handleClick()
        })
      },
      handleClick() {
        this.projectList.forEach(e => {
          if (e.projectName===this.choseProject) {
            this.tableData = e.submitList
          }
        })
      },
      cancelForm() {
        this.dialog = false
      },
      tagType(data) {
        if (data===0) {
          return 'primary'
        }
        if (data===1) {
          return 'warning'
        }
        if (data===2) {
          return 'danger'
        }
      },
      typeName(data) {
        if (data===0) {
          return '开发任务'
        }
        if (data===1) {
          return '生产事件'
        }
        if (data===2) {
          return '测试问题'
        }
      },
      submit() {
        this.loading = true
        this.sleep(800).then( _ => {
          board(this.row.crId).then( _ => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.loading = false
            this.dialog = false
            this.$parent.$parent.$refs['search'].handleClickSearch()
          })
        })
      },
      sleep(time) {
        return new Promise((resolve) => {
          setTimeout(resolve, time)
        });
      },
    },
    created() {
      this.height>900?this.tableHeight=780:490
    },
  }
</script>

<style>
  .el-badge__content.is-fixed {
    padding: 0 !important;
  }
  .el-badge__content {
    color: #ff0038 !important;
    line-height: 20px !important;
    left: 0 !important;
    height: 0 !important;
  }
</style>
